<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>releaseDetail</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
	<style>
  #releaseDetail{
    background:url(../../image/releaseDetail@2x.png) no-repeat center 20px;
    background-size:100% 100%;
   }
  .releaseDetailBody{

  }
  .detailTitle{
     text-align: center;
  }
  .detailTitle{
    width: 170px;
    height: 64px;
    line-height: 64px;
    background:url(../../image/mount@2x.png) no-repeat center;
    background-size:100% 100%;
    margin: 18px auto;
  }
  .detailTitle span{
     font-size:23px;
     color: #000;
     letter-spacing: 14px;
  }
  .detailTitle img{
     display: inline-block;
     width: 12px;
    height: 22px;
    margin: 0px 0 -2px 0px;
  }
  .detailText{
    margin: 0 40px;
  }
  .detailText p{
    font-size: 18px;
    color: #000;
    line-height: 32px;
    letter-spacing: 2px;
  }
  .detailText span:first-child{
        text-indent: 24px;
  }
  .grey{
      font-size: 17px;
      color: #969696;
  }
  .moneyDetail{
     color: #E50013;
  }
/*接单后显示界面*/
.aui-tab-item{
  font-size: 18px;
  height: 18px;
  line-height: 18px;
      margin: 16px 0 25px 0;
}
.msgPic{
 display: inline-block;
 max-width: none;
 width: 67px!important;
 height: 67px!important;
 border-radius: 50%;
 }
 .aui-list .aui-list-item{
   background-image: linear-gradient(0,transparent,transparent 50%,transparent 50%);
   background-image: -webkit-linear-gradient(90,transparent,transparent 50%,transparent 50%);
   margin: 0 15px 0 38px;
   border-top: 1px solid #969696;
   padding-top: 25px;
       padding-left: 0;
 }
 .aui-list.aui-media-list{
    margin: 30px 15px 0;
    background: rgba(255, 255, 255, 0);
 }
 .left{
   float: left;
 }
 .left p:first-child{
   color: #141414;
   font-size: 17px;
 }
 .left p:nth-child(2){
   font-size: 17px;
 }
 .right{
   float: right;
 }
 .phoneIcon{
   width: 55px;
   height: 55px;
   margin-top: 6px;
 }
 .levelIcon{
   display: inline-block;
   width: 38px;
   height: 19px;
   margin: 0 0 -3px 6px;
 }
 .starIcon{
   display: inline-block;
   width: 9px;
   height: 9px;
   margin-right: -3px;
 }
 .orders{
   font-size: 14px;
 }
 .btns{
    width: 275px;
    margin: 32px auto 0;
 }
 .btns span{
   width: 129px;
   height:39px;
 }
 .btns span:first-child{
   background:url(../../image/getBack@2x.png) no-repeat center;
   background-size:100% 100%;
   margin-right: 8px;
 }
 .btns span:last-child{
      background:url(../../image/complateBtn@2x.png) no-repeat center;
   background-size:100% 100%;
 }
 .aui-list-item-media{
    width: 4rem;
    height: 4rem;
 }
/*接单后显示界面*/


/*适配屏幕320px*/
@media (max-width: 320px) {
  .msgPic {
      width: 45px!important;
      height: 45px!important;
  }
  .aui-list-item-media{
     width: 3rem!important;
     height: 3rem;

  }
  .aui-list .aui-list-item{
     margin: 0 15px 0 31px;
  }
  .detailText p {
      font-size: 14px;
      line-height: 22px;
  }
  .aui-list.aui-media-list {
      margin: 15px 15px 0;
  }
  .btns {
      margin: 16px auto 0;
  }
  .detailTitle {
      height: 46px;
  }
    .phoneIcon {
      width: 37px;
      height: 37px;
  }
  .aui-list .aui-list-item{
      padding-top: 15px;
  }
}
/*适配屏幕320px*/
</style>
</head>
<body>
  <div id="releaseDetail" v-bind:style="{height:wHeight}" >
      <div style="height:20px;background:transparent"></div>
      <div id="releaseDetailHead" ><img src="../../image/RDH@2x.png"></div>
      <div class="releaseDetailBody">
          <h5 class="detailTitle"><span>钢琴演奏</span><img src="../../image/main/about1.png"></h5>
          <div class="detailText">
             <p><span class="grey">现招募</span>钢琴演奏<span class="grey">才子</span>10<span class="grey">人,性别</span>女,<span class="grey">地址</span>
                西安市雁塔区曲江环球中心华美达酒店3层黄鹤楼厅<span class="grey">时间</span>2018-02-05 09:00-11:00</p>
             <p><span class="grey">金额</span> <span class="moneyDetail">¥18000.00</span><span class="grey">元</span></p>
             <p><span class="grey">望</span>5男5女 懂外语 有经验者最好，感谢参与。</p>
          </div>
          <ul class="aui-list aui-media-list">
                <li class="aui-list-item">
                    <div class="aui-media-list-item-inner">
                        <div class="aui-list-item-media">
                            <img src="../../image/test@2x.png" class="msgPic">
                        </div>
                        <div style="width: 100%;padding: 10px 15px 10px 0;">
                            <div class="left">
                               <p>小米粒<img src="../../image/main/le@2x.png" class="levelIcon"></p>
                               <p>已接单(<span class="orders">102单</span>)</p>
                               <p>
                                 <img src="../../image/main/redStar@2x.png" class="starIcon">
                                 <img src="../../image/main/redStar@2x.png" class="starIcon">
                                 <img src="../../image/main/redStar@2x.png" class="starIcon">
                                 <img src="../../image/main/redStar@2x.png" class="starIcon">
                                 <img src="../../image/main/redStar@2x.png" class="starIcon">
                                 4.5
                               </p>
                             </div>
                             <div class="right"><img src="../../image/phone@2x.png" class="phoneIcon"></div>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="btns">
               <span @click="askReturn()"></span>
               <span></span>
            </div>
      </div>
      <div id="releaseDetailFoot"><img src="../../image/RDF@2x.png"></div>
  </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/fastclick.js"></script>
<script type="text/javascript">
    apiready = function(){
        api.parseTapmode();
    };
    ////初始化页面
    var app = new Vue({
        el: '#releaseDetail',
        data: {
            wHeight: '',
            showMask1 : true,
            showMask2 : true
        },
        methods: {
            init: function() {
              /////初始化页面高度
                var wh = document.documentElement.clientHeight || document.body.clientHeight;
                var hh = document.getElementById('releaseDetailHead').offsetHeight;
                var fh = document.getElementById('releaseDetailFoot').offsetHeight;
                this.wHeight = (wh) + 'px';
            },
            askReturn : function(){
               pageMathed.ask();
            }
        },
        mounted:function(){
            this.init();
        }
    });
    var pageMathed = {
        ask : function(){
          var UIActionSelector = api.require('UIActionSelector');
              UIActionSelector.open({
                  datas :'widget://res/reson.json',
                  iPhoneXBottomHeight : '34',
                  layout : {
                      row: 7,                            //（可选项）数字类型；每屏显示的数据行数，超出的数据可以滑动查看，只能是奇数；默认：5
                      col: 1,                            //（可选项）数字类型；数据源的数据级数，最多3级；默认：3
                      height: 30,                        //（可选项）数字类型；每行选项的高度；默认：30
                      size: 17,                          //（可选项）数字类型；普通选项的字体大小；默认：12
                      sizeActive: 20,                    //（可选项）数字类型；当前选项的字体大小；默认：同 size
                      rowSpacing: 5,                     //（可选项）数字类型；行与行之间的距离；默认：5
                      colSpacing: 10,                    //（可选项）数字类型；列与列之间的距离；默认：10
                      maskBg: 'rgba(0,0,0,0.2)',         //（可选项）字符串类型；遮罩层背景，点击该区域隐藏选择器，支持 rgb，rgba，#，img；默认：rgba(0,0,0,0.2)
                      bg: '#fff',                        //（可选项）字符串类型；选择器有效区域背景，支持 rgb，rgba，#，img；默认：#fff
                      color: '#969696',                     //（可选项）字符串类型；选项的文字颜色，支持 rgb，rgba，#；默认：#848484
                      colorSelected: '#007AFF'              //（可选项）字符串类型；已选项的文字颜色，支持 rgb，rgba，#；默认：同 colorActive
                  },
                  ok: {
                      text: '确定',
                      size: 17,
                      w: 90,
                      h: 35,
                      bg: '#fff',
                      bgActive: '#fff',
                      color: '#969696',
                      colorActive: '#fff'
                  },
                  cancel :{                                      //（可选项）JSON 对象类型；取消按钮设置
                      text: '取消',                      //（可选项）字符串类型；取消按钮的显示文字；默认：未设置时只显示背景
                      size: 17,                          //（可选项）数字类型；取消按钮的显示文字大小；默认：12
                      w: 90,                             //（可选项）数字类型；取消按钮的宽；默认：90
                      h: 35,                             //（可选项）数字类型；取消按钮的高；默认：35
                      bg: '#fff',                        //（可选项）字符串类型；取消按钮的背景，支持 rgb，rgba，#，img；默认：'#fff'
                      bgActive: '#fff',                  //（可选项）字符串类型；取消按钮的背景高亮，支持 rgb，rgba，#，img；默认：同 bg
                      color: '#969696',                     //（可选项）字符串类型；取消按钮的文字颜色，支持 rgb，rgba，#；默认：'#848484'
                      colorActive: '#fff'                //（可选项）字符串类型；取消按钮的文字颜色高亮，支持 rgb，rgba，#；默认：同 color
                  },
                  title : {                                      //（可选项）JSON 对象类型；选择器顶部标题栏设置
                      text: '申请退款',                    //（可选项）字符串类型；选择器的标题内容；默认：请选择
                      size: 18,                          //（可选项）数字类型；标题内容的文字大小；默认：12
                      h: 44,                             //（可选项）数字类型；标题栏的高；默认：44
                      bg: '#fff',                        //（可选项）字符串类型；标题栏的背景，支持 rgb，rgba，#，img；默认：'#eee'
                      color: '#000'  ,                    //（可选项）字符串类型；标题内容的文字颜色，支持 rgb，rgba，#；默认：'#848484'
                      alignment:'center'                 // (可选项)字符串类型；标题内容的文字的对齐方式，默认：'center'
                  },
                  lineColor : 'rgba(0,0,0,0)',
                  actives : [],
                },  function(ret, err) {
                     if (ret) {
                        //console.log(JSON.stringify(ret));
                        api.openFrame({
                            name: 'releaseDetail_askReturn',
                            url: '../releaseDetail/releaseDetail_askReturn.html',
                            rect: {
                                x: 0,
                                y: 0,
                                w: 'auto',
                                h: 'auto'
                            },
                            animation: {
                               type:"movein",
                               subType:"from_bottom",
                               duration:200
                            }
                        });
                     } else {
                         //console.log(JSON.stringify(err));
                     }
          })
        }
    }

</script>
</html>
